<template>
  <div class="container">
    <!-- <h1>home</h1> -->
    <el-row class="row-md" justify="center">
      <el-col :span="7">
        <h1 id="title">EasyBrain</h1>
      </el-col>
    </el-row>
    <el-row class="row-md" justify="center">
      <el-col :span="7">
        <div class="form">
          <br />
          <el-row class="row-md" justify="start">
            <el-col :span="7" :offset="2">
              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabChange">
                <el-tab-pane label="登录" name="first"></el-tab-pane>
                <el-tab-pane label="注册" name="second"></el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
          <el-row class="row-md" justify="center">
            <el-col :span="20">
              <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="用户名">
                  <el-input v-model="form.name" type="text" placeholder="请输入用户名" width="80px"/>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input v-model="form.pwd" type="password" placeholder="请输入密码" show-password width="80px"/>
                </el-form-item>
                <el-form-item>
                  <a href="/">邮箱验证码登录</a>&nbsp;&nbsp;&nbsp;&nbsp;
                  <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue';
import { TabsPaneContext } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import { pwdLoginApi } from '@/utils/request';
import { Md5 } from "ts-md5";


const ruleFormRef = ref<FormInstance>()
const form = reactive({
  name: "",
  pwd: ""
})
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'change' },
  ]

})

const submitForm = async (formEl: FormInstance | undefined) => {
  console.log('此处打印一下获取的数据', formEl)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
  pwdLoginApi({
    username: form.name,
    password: Md5.hashStr(form.pwd) 
  }).then(res => {
    if (res.data != null) {
      if (form.name === localStorage['name'] && form.pwd === localStorage['password']) {
        localStorage.setItem("token",res.data.token);
        router.push({
          path: "/home",
          name: "home",
          params: res.data
        })//如果输入的名字以及密码正确路由跳转至个人页面
      }
      else {
        alert('账号不存在，请注册后登录');//查无此号
      }
    }
    console.log("登录信息", res)
  })
}

const activeName = "first"
const router = useRouter()
const tabChange: any = (tab: TabsPaneContext, event: Event) => {
  if (tab.paneName == "first") {
    router.push({
      path: "/",
      name: "login"
    })
  }
  else if (tab.paneName == "second") {
    router.push({
      path: "/register",
      name: "register"
    })
  }
}
// const ChangeLogin: any = () => {
//   router.push({
//     path: "/login",
//     name: "login2"
//   })
// }
</script>
